<template>
  <div class="conten">
    <div class="conten_search">
      <el-input class="conten_search_input" type="text" :prefix-icon="Search"></el-input>
      <el-button size="large" class="conten_search_button">
        搜索
      </el-button>
    </div>

    <div class="operate">
      <div class="one"><span>订单信息</span></div>
      <div class="two"><span>购买数量</span></div>
      <div class="three"><span>单价</span></div>
      <div class="four"><span>实付</span></div>
      <div class="five"><span>状态</span></div>
      <div class="five"><span>操作</span></div>
    </div>
    <div class="conten_data">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'orders_manager',
})
</script>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>

<style scoped lang="less">
.conten {
  .conten_search {
    padding-right: 30px;
    display: flex;

    .conten_search_input {
      background-color: #ccc;
      width: 270px;
    }

    .conten_search_button {
      margin-left: 10px;
    }
  }

  .operate {
    display: flex;
    margin-top: 16px;
    background-color: #f2eded;

    .one {
      width: 410px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }

    .two {
      width: 150px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }

    .three {
      width: 134px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }

    .four {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }

    .five {
      width: 133px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }

  .conten_data {
    height: 56px;
    line-height: 56px;
    text-align: center;
    width: 100%;
    color: #ccc;
  }
}
</style>
